<template>
  <div class="change_useinfo">
    <el-form label-position="top" label-width="100px" :model="userInfo">
      <el-form-item label="昵称">
        <el-input v-model="userInfo.detail.nickname" />
      </el-form-item>
      <el-form-item label="头像">
        <div class="upload">
          +
          <img id="img" class="upload-img" :src="avatarBase64?.value" alt="" />
          <input class="file" id="file" type="file" v-on:change="UploadImg(this)" />
        </div>
      </el-form-item>
    </el-form>
    <el-button @click="hanldeUpdataInfo">确定</el-button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserInfo, changeUserInfo } from '@/api/user'
import router from '@/router'
import { userStore } from '@/store/user'

console.log(router, 'router');

let userInfo = reactive({
  detail: {
    _id: '',
    nickname: ''
  }
})
let avatarBase64 = ref()
const user_store = userStore()

// 获取用户信息
getUserInfo()
  .then((res) => {
    if (res.data.status === 0) {
      userInfo.detail = res.data.data
    }
    if (res.data.status === 400) {
      ElMessage(res.data.message)
      localStorage.clear()
      router.replace('./login')
    }
    userInfo.detail = res.data.data
    var img = <HTMLImageElement>document.getElementById('img')
    img.src = res.data.data.avatar
    avatarBase64.value = res.data.data.avatar
    user_store.changeUserInfoState(res.data.data)
  })
  .catch((err) => {
    console.log(err)
  })

// 图片上传预览
function UploadImg(obj: any) {
  var reader = new FileReader()
  let file: any = <HTMLInputElement>document.getElementById('file')
  let fileUrl = file.files[0]
  reader.readAsDataURL(fileUrl)
  reader.onload = function (e: any) {
    //成功读取文件
    var img = <HTMLImageElement>document.getElementById('img')
    img.src = e.target.result
    avatarBase64.value = e.target.result
  }
}

// 更新用户信息
function hanldeUpdataInfo() {
  changeUserInfo({
    nickname: userInfo.detail.nickname,
    _id: userInfo.detail._id,
    avatar: avatarBase64.value
  }).then((res) => {
    user_store.changeUserInfoState(res.data)
    router.replace('/main')
  })
}
</script>

<style lang="less" scoped>
.change_useinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  padding: 20px 20px;
}

.upload {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #dcdfe6;
  width: 200px;
  height: 200px;
  background-color: #fff;
  color: #222222;
  font-size: 50px;

  &-img[src=''] {
    opacity: 0;
  }

  &-img {
    position: absolute;
    // width: 100%;
    height: 100%;
  }
}

.file {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.el-button {
  width: 100px;
}

:deep(.el-form) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #ffffff;
}
</style>